<template>
    <el-dialog
    title="预览文章"
    :visible="showPreviewDialog"
    width="47%"
    @open="getArtInfo"
    @close="handleClose">
    <div>
        <h2> {{thisArtInfo.title}}</h2>
        <div style="padding-bottom:10px">
            <span>{{thisArtInfo.createTime | parseTimeByString()}}</span>
            <span style="margin-left:10px">{{thisArtInfo.creatorID | number2TextUsername(EntryUserList)}}</span>
            <i class="el-icon-view" style="margin:0 10px"></i>
            <span>{{thisArtInfo.visits}}</span>
        </div>
        <div class="content" v-html="thisArtInfo.articleBody">

        </div>
    </div>
    </el-dialog>
</template>

<script>
// ajax
import { detail } from '@/api/hmmm/articles'
// 导入获取简单学科列表api
import { simple as entryUser } from '@/api/base/users'
export default {
  name: 'HmmmXxxxInterviewPreviewdialog',
  props: {
    //   dialog的显示隐藏
    showPreviewDialog: {
      type: Boolean,
      required: true
    },
    // 点击对应文章数据
    clickArtInfo: {
      type: Object,
      required: true
    }
  },

  data () {
    return {
      thisArtInfo: {},
      EntryUserList: []
    }
  },

  mounted () {

  },

  methods: {
    // 页面一加载获取录入人
    async getEntryUser () {
      const { data: res } = await entryUser()
      // console.log(res)
      this.EntryUserList = res
    },
    //   关闭弹出层
    handleClose () {
      this.$emit('update:showPreviewDialog', false)
    },
    // 打开弹出层触发
    async getArtInfo () {
      this.getEntryUser()
      const { data: res } = await detail(this.clickArtInfo)
      //   console.log(res)
      this.thisArtInfo = res
    }
  },
  filters: {
    number2TextUsername: (value, arr) => {
      if (!arr) return
      const res = arr.find(item => item.id === +value)
      return res?.username ? res?.username : '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;
}
</style>
